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React Bits 7 3 hk 


有 关 React， 你 需要 知道 的 一 切 
Gitbook format: https://wizardforcel.gitbooks.io/react-bits 
Repo 地 址 https://github.com/hateonion/react-bits-CN 


Your contributions are heartily V welcome. (£^ ^) 新 司机 上 路 , 欢迎 大 家 随 
时 提 issue 和 pr 进行 指正 
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JSX 中 的 状态 分 支 
在 以 下 情况 下 ， 和 使 用 三 元 运算 符 相 比 


const sampleComponent = () => { 
return isTrue ? <p>True!</p> : <none/> 


HH 


使 用 && 符 号 的 表达 式 简写 会 是 一 种 更 好 的 实践 


const sampleComponent = () => { 
return isTrue && <p>True!</p> 


Hh 


do RT dn — UR AR. $ = UE EAE 0 8: 


// Y soo many ternary??? :-/ 
const sampleComponent = () => ( 
return ( 
«div» 
(flag && flag2 && !flag3 
? flag4 
? <p>Blah</p> 
: flag5 
? <p>Meh</p> 
: <p>Herp</p> 
: <p>Derp</p> 
j 
«/div» 
) 
H 


e 最 佳 实 践 : 将 逻辑 移 到 子 组 件 内 部 
e 另 一 种 hack 的 做 法 : 使 用 IFE(Immediately-Invoked Function Expression 立即 
执行 函数 ) 


有 一 些 库 可 以 解决 用 jsx 控 制 组 件 状态 的 问题 ， 但 是 这 些 外 部 依赖 并 不 是 必须 的 ， 我 
们 可 以 使 用 IFE 将 if-else 的 逻辑 封装 到 组 件 内 部 ， 外 部 调用 者 并 不 需要 关心 这 些 训 
辑 ， 正 常 调用 即 可 。 


const sampleComponent = () => { 
return ( 
<div> 
x 
(() => { 
if (flag && flag2 && !flag3) { 
if (flag4) { 
return <p>Blah</p> 
} else if (flag5) { 
return <p>Meh</p> 
) else ( 
return <p>Herp</p> 
} 
} else { 
return <p>Derp</p> 
J 
3)() 
} 
</div> 
) 
J; 


KAW 9T VL M A AF T ARAR M return 4 3 a ^ AE ARES AHF 
断 执行 。 


const sampleComponent = () => { 
const basicCondition = flag && flag2 && !flag3; 
if (!basicCondition) return <p>Derp</p>; 
if (flag4) return <p>Blah</p>; 
if (flag5) return <p>Meh</p>; 
return <p>Herp</p> 


Conditional in JSX 


参考 资料 : 


e https://engineering.musefind.com/our-best-practices-for-writing-react- 
components-dec3eb5c3fc8 
e Conditional rendering 


setState $ 4.9 HU 


在 某 些 情况 下 ，React 框 架 出 于 性 能 优化 考虑 ， 可 能 会 将 多 次 state 更 新 合并 成 一 次 
更 新 。 正 因为 如 此 ，SsetState 实 际 上 是 一 个 异步 的 函数 。 但 是 ， 有 一 些 行为 也 会 阻 
止 React 框 架 本 身 对 于 多 次 state 更 新 的 合并 ， 从 而 让 state 的 更 新 变 得 同步 化 。 m 


Pr 


42: eventListeners, Ajax, setTimeout 等 等 。 

详解 

4setState() 元 数 执行 的 时 候 ， 冰 数 会 创建 一 个 暂 态 的 state 作 为 过 渡 state， 而 不 是 
立即 修改 this.state。 如 果 在 调用 setState() 函 数 之 后 尝试 去 访问 this.state， 你 得 到 

的 可 能 还 是 setState() 辑 数 执 行 之 前 的 结果 。 在 使 用 setState() 的 情况 下 ， 看 起 来 同 


步 执行 的 代码 其 实 执 行 顺 序 是 得 不 到 保证 的 。 原 因 上 面 也 提 到 过 ，React 可 能 会 将 
多 次 state 更 新 合并 成 一 次 更 新 来 优化 性 能 。 


运行 下 面 这 段 代码 ， 你 会 发 现 当 和 addEventListener, setTimeout 函数 或 者 发 出 
AJAX call 的 时 候 ， 调 用 setState, state 2 A +a È °- JF Hrender SA “#setState() 
函数 被 触发 之 后 马上 被 调用 。 那 么 到 底 发 生 了 什么 呢 ? 事实 上 ， 类 似 setTimeout() 
函数 或 者 发 出 ajax call 的 fetch 喜 数 属 于 调用 浏览 器 层面 的 APl， 这 些 函 数 的 执行 并 不 
存在 与 React 的 上 下 文中 ， 所 以 React 并 不 能 够 像 控制 其 他 存在 与 其 上 下 文中 的 函数 
一 样 ， 将 多 次 state 更 新 合并 成 一 次 。 


在 上 面 这 些 例子 中 ，React 框 架 之 所 以 在 选择 在 调用 setState 函 数 之 后 立即 更 新 
state 而 不 是 采用 框架 默认 的 方式 ， 即 合并 多 次 state 更 新 为 一 次 更 新 ， 是 因为 这 些 函 
数 调 用 (fetch,setTimeout 等 浏览 器 层面 的 API 调 用 ) 并 不 处 于 React 框 架 的 上 下 文中 ， 
React 没 有 办 法 对 其 进行 控制 。 MM 此 时 采用 的 策略 就 是 及 时 更 新 ， 确 保 在 这 些 
函数 执行 之 后 的 其 他 代码 能 拿 到 正确 的 数据 〈 即 更 新 过 的 state)。 


Class TestComponent extends React.Component { 
constructor(props) { 


super (props); 
this.state = { 


Async Nature Of setState() 


dollars: 10 
} 


this.onMouseLeaveHandler = this.onMouseLeaveHandler.bind(this 


); 
this.onTimeoutHandler - this.onTimeoutHandler.bind(this); 
this.onAjaxCallback - this.onAjaxCallback.bind(this); 
this.onClickHandler - this.onClickHandler.bind(this); 


componentDidMount() { 

// Add custom event via ^"addEventListener' 

w 

// The list of supported React events does include `mouselea 
ve' 

// via 'onMouseLeave' prop 

es 

// However, we are not adding the event the “React way - th 
is will have 

// effects on how state mutates 

Th 

// Check the list here - https://facebook.github.io/react/do 
cs/events.html 

document.getElementById('testButton').addEventListener('mous 
eleave', this.onMouseLeaveHandler); 


// Add JS timeout 

22] 

// Again,outside React ‘world’ - this will also have effects 
on how state 

// mutates 

setTimeout(this.onTimeoutHandler, 10000); 


// Make AJAX request 
fetch('https://api.github.com/users') 
.then(this.onAjaxCallback); 


onClickHandler = () => { 
console.log('State before ( onClickHandler): ' + JSON.string 
ify(this.state) ); 


this.setState({ 
dollars: this.state.dollars + 10 
3); 
console.log('State after ( onClickHandler): ' + JSON.stringi 
fy(this.state)); 


} 


onMouseLeaveHandler = () => { 

console.log('State before (mouseleave): ' + JSON.stringify(t 
his.state)); 

this.setState({ 

dollars: this.state.dollars + 20 

}); 

console.log('State after (mouseleave): ' + JSON.stringify(th 
is.state)); 


} 


onTimeoutHandler = () => { 
console.log('State before (timeout): ' + JSON.stringify(this 
.State)); 
this.setState({ 
dollars: this.state.dollars + 30 


3); 
console.log('State after (timeout): ' + JSON.stringify(this. 
state)); 
} 
onAjaxCallback = (err, res) => { 
if (err) ( 
console.log('Error in AJAX call: ' + JSON.stringify(err)); 
return; 
j 


console.log('State before (AJAX call): ' + JSON.stringify(th 
is.state)); 
this.setState({ 
dollars: this.state.dollars + 40 
3); 
console.log('State after (AJAX call): ' + JSON.stringify(this 
.State)); 


render() { 
console.log('State in render: ' + JSON.stringify(this.state) 


): 


return ( 
«button 
id="testButton" 
onClick={this.onClickHandler }> 
"Click me' 
</button> 


); 


ReactDOM. render ( 

<TestComponent />, 

document .getElementById('app' ) 
); 


加 一 
解决 setState HAH 869 DIK? 


IRAE React’ E Z 3L > setState HR E s Edo AC HELM Ad XSEX— 


» HR > TE A setState BRATS HA o Mats AIA HARA FX > React] AR 
证 传 入 的 回调 函数 一 定 是 在 setState 成 功 更 新 this.state 之 后 再 执行 。 


例子 


_—onClickHandler: function _onClickHandler() { 
console.log('State before ( onClickHandler): ' + JSON.stringi 


fy(this.state)); 
this.setState({ 
dollars: this.state.dollars + 10 


pr cct 


console.log('Here state will always be updated to latest vers 


ton”); 
console.log('State after (_onClickHandler): ' + JSON.stringif 


y(this.state)); 
3); 


更 多 关于 setState 的 小 知识 


其 实 setState 作 为 一 个 函数 ， 本 身 是 同步 的 。 只 是 因为 在 setState 的 内 部 实现 中 ， 使 
用 了 React updater 的 enqueueState 或 者 enqueueCallback 方 法 ， 才 造成 了 异步 。 


下 面 这 段 是 React 源 码 中 setState 的 实现 : 


ReactComponent.prototype.setState = function(partialState, callb 


ack) { 
invariant ( 
typeof partialState === 'object' || 
typeof partialState === 'function' || 


partialState == null, 
'setState(...): takes an object of state variables to update 


Ora = 
'function which returns an object of state variables.' 
); 
this.updater.enqueueSetState(this, partialState); 
if (callback) { 
this.updater.enqueueCallback(this, callback, 'setState'); 
} 
J; 


而 Updater 的 这 两 个 方法 ， 又 和 React 底 层 的 Virtual Dom( 虚 拟 DOM 树 ) 的 diff 算 法 有 
紧密 的 关系 ， 所 以 真正 决定 同步 还 是 异步 的 其 实 是 Virtual DOM 的 diff 算 法 。 


Async Nature Of setState() 


参考 资料 : 


e https://medium.com/@wereHamster/beware-react-setstate-is-asynchronous- 
ce87ef1a9cf3#.jhdhncws3 

e https://www.bennadel.com/blog/2893-setstate-state-mutation-operation-may- 
be-synchronous-in-reactjs.htm 
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依赖 注入 


在 React 中 ， 想 做 依赖 注入 (Dependency Injection) 其 实 相当 简单 。 请 看 下 面 这 个 例 
T3 


// Title.jsx 
export default function Title(props) { 
return <h1>{ props.title }</h1>; 


// Header.jsx 
import Title from './Title-]sx 
export default function Header() { 
return ( 
<header> 
<Title /> 
</header> 


); 


// App.jsx 
import Header from './Header.jsx'; 
class App extends React.Component { 
constructor(props) { 
super (props); 
this.state = { title: 'React Dependency Injection' }; 
} 
render() { 
return <Header />; 


试想 ， 我 们 想 把 "React Dependency Injection" 3x A F 4 # 44 8) RAT A Title 24E do 
去 。 比 较 直 观 的 方法 是 把 这 个 字符 串 作 为 props 传 入 Header 组 件 ， 然 后 Header 组 件 
将 这 个 字符 串 作 为 props 传 入 Title 组 件 。 在 只 有 三 个 组 件 相 互 虞 套 的 情况 下 ， 上 面 


的 这 种 解决 方式 似乎 能 满足 我 们 的 需要 。 但 是 设想 一 下 ， 随 着 组 件数 量 的 增加 以 及 
组 件 齿 套 层 次 的 加 深 ， 许 多 的 组 件 都 需要 接收 该 组 件 本 身 并 不 需要 关心 的 props， 
然后 且 简 单 地 传递 给 予 组 件 。 直 观 上 来 看 ， 上 面 的 这 种 方法 在 这 种 情况 下 ， 似 乎 就 
不 太 适用 了 。 


不 过 不 用 担心 ， 事 实 上 我 们 还 有 很 多 方法 能 实现 依赖 的 注入 ， 其 中 之 一 就 是 高 阶 组 
件 (high-order component)。 


Hi NECE SX 
var title = 'React Dependency Injection'; 
export default function inject(Component) { 
return class Injector extends React.Component { 
render() { 
return ( 
<Component 
t thrssstabe) 
(2. CLS. props} 
title={ title } 
/> 


// Title.jsx 
export default function Title(props) { 
return <hi>{ props.title }</h1>; 


// Header .jsx 
import inject from './inject.jsx'; 
Inport Mmtle from *./ title Tsx 


var EnhancedTitle = inject(Title); 
export default function Header() { 
return ( 
<header> 
<EnhancedTitle /> 
</header> 


); 


在 上 面 这 种 实现 中 ，title 这 个 字符 串 作 为 我 们 的 数据 没有 被 注入 到 整个 的 组 件 树 

中 。 相 反 ， 我 们 的 数据 只 传递 给 了 需要 关注 这 个 数据 的 组 件 。 这 种 实现 看 上 去 比 上 
面 优 雅 了 很 多 ， 但 事实 上 并 没有 完全 解决 我 们 的 问题 。 我 们 将 title 这 个 字符 串通 过 
inject 这 个 高 阶 组 件 注 入 了 进去 ， 但 是 如 果 我 的 title 字 符 串 只 能 在 我 的 Header 组 件 这 
个 层级 获得 呢 ?那么 是 不 是 意味 着 我 还 需要 再 从 Header 组 件 传 递 给 inject 组 件 呢 ? 


这 是 一 个 实际 可 能 会 发 生 的 问题 ， 为 了 解决 这 个 问题 ， 接 下 来 需要 介绍 一 下 React 
的 Context API。 在 React 框 架 中 ， 存 在 着 context 这 样 一 个 概念 。context 有 点 类 似 
与 事件 总 线 (Event Bus)， 有 是 一 个 无 论 在 哪 都 可 以 访问 的 对 象 。 不 同 的 是 ， 但 是 在 
Context 里 面 维持 的 全 部 都 是 我 们 的 数据 而 非 事件 。context 贯 穿 于 整个 组 件 树 中 ， 
所 有 的 组 件 都 可 以 访问 context 。 


使 用 方法 


var context = { title: 'React in patterns' }; 
class App extends React.Component { 
getChildContext() { 
return context; 


j 
2 EUN 


App.childContextTypes - ( 
title: PropTypes.string 


e 


A place where we need data 


class Inject extends React.Component { 
render() { 
var title = this.context.title; 
EL rate 


} 

} 

Inject.contextTypes = { 
title: PropTypes.string 


P 


需要 注意 的 是 ， 在 最 新 的 React 官 方 文 档 中 ，Context 已 经 不 太 被 官方 推荐 使 用 
了 。Why Not To Use Context 


e What is Dependency Injection? 
e The Basics of Dependency Injection 


Dependency injection in JavaScript 
DI In React 


&, X Context 


相 比 于 单纯 的 数据 对 象 ， 将 context 包 装 成 一 个 提供 一 些 方法 的 对 象 会 是 更 好 的 实 
践 。 因 为 这 样 能 提供 一 些 方法 供 我 们 操作 context 里 面 的 数据 。 


// dependencies.js 
export default { 
data: {}, 
get(key) { 
return this.data[key]; 
tr 
register(key, value) { 
this.data[key] = value; 


经 过 了 包装 的 Context， 可 以 通过 类 似 于 下 面 的 这 种 方法 使 用 。 


import dependencies from './dependencies'; 
dependencies.register('title', 'React in patterns'); 


class App extends React.Component { 
getChildContext() { 
return dependencies; 
} 
render() { 
return <Header />; 


// 我 们 还 可 以 对 context 中 的 数据 做 类 型 校 验 
App.childContextTypes = { 

data: PropTypes.object, 

get: PropTypes.func, 

register: PropTypes. func 


HH 


这 样 我 们 的 Title 组 件 就 能 直接 从 Context 中 获取 数据 了 。 


Ze Nit lens 
export default class Title extends React.Component { 
render() { 
return <hi>{ this.context.get('title') }</h1> 


} 
Title.contextTypes = { 


data: PropTypes.object, 
get: PropTypes.func, 
register: PropTypes. func 


了 


一 般 来 说 ， 我 们 不 需要 每 次 在 使 用 context 的 地 方 都 对 context 内 的 数据 做 类 型 校 
验 。 这 种 功能 完全 可 以 借 由 一 个 高 阶 组 件 派 生出 来 。 我 们 甚至 可 以 使 用 高 阶 组 件 来 
作为 我 们 操作 context 的 代理 ， 来 替代 我 们 对 于 context 的 直接 操作 。 


比如 : 我 们 可 以 使 用 一 个 高 阶 组 件 来 蔡 代 我 们 直接 对 于 this.context.get('title') 方 法 
的 调用 。 


L^ Titled sx 
import wire from './wire'; 


function Title(props) T 
return <hi>{ props.title }</h1>; 


export default wire(Title, ['title'], function resolve(title) { 
return { title }; 
3); 


wire 这 个 函数 的 接收 一 个 React Element 作 为 第 一 个 参数 。 第 二 个 参数 为 一 个 数组 ， 
数组 内 容 为 组 件 所 依赖 的 数据 在 context 中 的 key。 第 三 个 参数 我 把 它 叫 做 mapper : 
mapper 这 个 函数 会 将 context 里 面 的 原始 数据 进行 处 理 ， 然 后 以 对 象 的 形式 返回 组 
件 所 需要 的 数据 。 在 我 们 的 Title 组 件 的 例子 中 ， 我 们 在 只 需要 在 第 二 个 参数 中 传 入 
title 作 为 我 们 依赖 的 描述 ，mapper 就 会 返回 在 context 中 的 title。 但 是 在 实际 应 用 

中 ， 我 们 所 需要 的 数据 可 能 会 很 多 ， 依 赖 的 描述 形式 也 可 能 千变万化 ， 可 能 是 一 堆 


数据 的 集合 ， 也 可 能 是 读 自 某 个 配置 文件 。 但 是 我 们 都 可 以 通过 将 依赖 的 描述 传 入 
wire 函数， 让 wire 函数 去 帮 我 们 将 所 有 必要 的 依赖 传 入 我 们 的 组 件 ， 而 不 是 传 入 所 
有 的 context 。 


下 面 是 一 种 可 能 的 实现 : 


export default function wire(Component, dependencies, mapper) { 
class Inject extends React.Component { 
render() { 
var resolved = dependencies.map(this.context.get.bind(this 
.context)); 
var props = mapper(...resolved); 


return React.createElement(Component, props); 


} 
Inject.contextTypes = { 


data: PropTypes.object, 
get: PropTypes.func, 
register: PropTypes. func 
J; 
return Inject; 


iz 


Inject 是 一 个 能 访问 context 并 且 获 取 所 有 在 dependency 数 组 中 列 出 的 数据 的 高 阶 组 
件 。mapper 是 一 个 能 接受 context 数 据 作为 输入 ， 将 所 有 需要 的 数据 从 context 中 取 
出 转换 成 组 件 props 的 函数 。 


不 依赖 context 的 另外 一 种 实现 


我 们 使 用 一 个 单 例 来 注册 /获取 所 有 的 依赖 


var dependencies = {}; 


export function register(key, dependency) { 
dependencies[key] = dependency; 


export function fetch(key) { 
if (key in dependencies) return dependencies[key]; 
throw new Error( "$( key } is not registered as dependency. ` ); 


export function wire(Component, deps, mapper) { 
return class Injector extends React.Component { 
constructor(props) { 
super(props); 
this._resolvedDependencies = mapper(...deps.map(fetch)); 


} 
render() { 
return ( 
<Component 
i-..thzs-state] 
na Props) 
{...this._resolvedDependencies} 
/> 
); 
} 
}; 


我 们 把 dependencies 这 个 对 象 存 放 在 全 局 范围 (不 是 应 用 全 局 范围 ， 而 是 包 全 局 范 
) 。 同 时 我 们 export 出 register 和 fetch 两 个 函数 用 于 读 写 我 们 的 dependencies 对 
Ro (有 点 类 似 javascript class 里 面 getter 和 setter 的 实现 ) 。 至 此 ，Wire 函 数 的 实 
现 就 已 经 完成 了 。Wire 函 数 接受 一 个 React 组 件 作 为 输入 ， 输 出 一 个 高 阶 组 件 。 


我 们 在 这 个 返回 的 高 阶 组 件 中 去 处 理 我 们 的 依赖 并 将 其 转化 为 props, 在 render 函 数 
中 传 入 子 组 件 〈 即 我 们 传 入 想 站 正 泻 沫 的 组 件 ) 


遵循 上 面 这 个 模式 ， 我 们 实现 了 以 下 代码 。di.jsx 这 个 helper 帮 助 我 们 将 我 们 应 用 的 
所 有 以 来 注册 好 ， 并 且 通 过 这 个 helper 我 们 可 以 在 整个 应 用 的 域 里 面 随时 取得 我 们 
想 需 要 的 依赖 。 


// app.jsx 
import Header from './Header.jsx'; 
import { register } from './di.jsx'; 


register('my-awesome-title', 'React in patterns'); 


class App extends React.Component { 
render() { 
return <Header />; 


// Header .jsx 
import Title from './Title.]sx'. 


export default function Header() { 
return ( 
<header> 
<mt len 
</header> 


); 


// Title.jsx 
import { wire } from './di.jsx'; 


var Title = function(props) { 
return <h1>{ props.title }</h1>; 
}; 


export default wire(Title, ['my-awesome-title'], title => ({ tit 


le })); 


如 果 我 们 仔细 观察 Title.jsx 的 话 ， 我 们 会 发 现实 际 上 用 到 的 component 和 
wiring 后 的 component 的 可 以 来 自 于 不 同 的 文件 ， 这 样 的 话 ， 所 有 的 这 些 代码 都 是 
可 以 被 很 容易 的 测试 的 。 (因为 可 以 很 容 多 被 mock ) 


事件 处 理 


我 们 需要 在 constructor 中 对 于 事件 与 对 应 的 handler 有 函数 进行 绑 定 . 


大 多 数 时 候 我 们 在 发 出 DOM 事 件 的 组 件 内 部 写 我 们 的 handler 元 数 . 在 下 面 的 例子 
中 ,我 们 在 组 件 内 部 创建 了 一 个 click handler, 因为 我 们 想 所 有 的 Swithcer 
Component 当 被 点 击 时 ,做 出 同样 的 响应 . 
class Switcher extends React.Component { 
render() { 


return ( 
«button onClick={ this. handleButtonClick }> 
click me 
«/button» 
); 
} 
_handleButtonClick() { 
console.log('Button is clicked'); 


} 
} 


上 面 这 样 做 完全 没有 问题 ,因为 _handleButtonClick 是 一 个 函数 , RERA S 
数 和 onClick 这 个 React 支 持 的 event 绑 定 在 了 一 起 . 


但 是 上 面 这 样 做 也 会 带 来 问题 , 使 用 function 的 写法 , 会 在 function 初 始 化 时 生成 一 个 
this. 比如 我 们 在 _handleButtonClick 里 面 使 用 this , 此 时 的 this 

是 _handleButtonClick 生成 出 来 的 , 和 Switcher 这 个 class 的 this 没 有 任何 关系 ， 
如 果 我 想 访 问 类 似 于 this.props 或 者 this.state 这 样 的 对 象 , 代码 便 会 报错 . 


class Switcher extends React.Component { 
constructor(props) { 
super (props); 
this.state = { name: 'React in patterns' }; 
} 
render() { 
return ( 
«button onClick={ this. handleButtonClick }> 
click me 
«/button» 


); 
_handleButtonClick() { 
console.log( Button is clicked inside ${ this.state.name } ) 


// 将 导致 
// Uncaught TypeError: Cannot read property 'state' of null 


所 以 我 们 常用 的 解决 办 法 像 下 面 一 样 使 用 bind 


«button onClick={ this. handleButtonClick.bind(this) }> 
click me 
«/button» 


然而 , 这 种 写法 意味 这 我 们 要 一 次 又 一 次 的 去 调 bind 函 数 , 因为 我 们 的 button 可 能 会 
PIE FEAR SR, 一 种 更 好 的 做 法 是 在 组 件 的 constructor 中 去 做 我 们 bind 函 数 的 调用 . 


class Switcher extends React.Component { 
constructor(props) { 
super (props); 
this.state = { name: 'React in patterns' }; 
this. buttonClick = this. handleButtonClick.bind(this); 
} 
render() { 
return ( 
<button onClick={ this. buttonclick }> 
click me 
</button> 
); 
} 
_handleButtonClick() { 
console.log( Button is clicked inside ${ this.state.name } ) 


Aa AP Zi ik NEA aK BAH TKN WhandlerBx, 因为 箭头 函数 并 不 会 创 
建 this . 


顺带 一 提 的 是 , Facebook 也 推荐 使 用 这 种 方法 去 处 理 需要 访问 组 件 的 this YH 
数 . 


但 是 , 在 constructor 中 去 做 binding 也 同样 有 用 处 . 比如 ， PM EE 会 将 父 组 件 中 定义 
的 函数 作为 Props 传 下 去 . 因此 在 子 组 件 中 , 我 们 需要 对 这 个 函数 进行 bind. 


E PY 
Flux4& X, 
fal 2 49 dispatcher 3: 3 


var Dispatcher = function () { 
return { 

_stores: [], 

register: function (store) { 
this. stores.push((store: store)); 

tr 

dispatch: function (action) { 
if (this._stores.length > 0) { 

this._stores.forEach(function (entry) { 
entry.store.update(action); 


3): 


} 
}; 


我 们 期 望 我 们 的 store 能 提供 一 个 update 方 法 . 接 下 来 让 我 们 来 修改 一 下 我 们 的 
register $% 4. 


function register(store) { 
if (!store || !store.update && typeof store.update === 'functi 
on”) 4 
throw new Error('You should provide a store that has an upda 
te method'); 
) else { 
this. stores.push((store: store); 


Z Z t dispatcher & I 


var Dispatcher = function () { 


return { 
_stores: [], 
register: function (store) { 
if (!store || !store.update && typeof store.update === 'fu 
netiom ed 
throw new Error('You should provide a store that has an 
‘update method.'); 
} else { 
var consumers = []; 
var change = function () { 
consumers.forEach(function (1) { 
l(store); 
3); 
3 
var subscribe = function (consumer, noInit) { 
consumers.push(consumer); 
InoInit ? consumer(store) : null; 


HH 


this. stores.push((store: store, change: change); 
return subscribe; 
} 
return false; 
tr 
dispatch: function (action) { 
if (this._stores.length > 0) { 
this._stores.forEach(function (entry) { 
entry.store.update(action, entry.change); 


3); 


} 
H 


module.exports - ( 
create: function () { 
var dispatcher - Dispatcher(); 


return { 
createAction: function (type) ( 


Flux Pattern 


if (!type) ( 
throw new Error('Please, provide actionN's type.'); 
) else { 
return function (payload) ( 
return dispatcher.dispatch({type: type, payload: pay 
load)); 


} 
ty 


createSubscriber: function (store) ( 
return dispatcher.register(store); 


} 
Hh 


参考 资料 : 


e https://github.com/krasimir/react-in-patterns/tree/master/patterns/flux 


单 向 数据 流 


单 向 数据 流 只 关注 于 在 store 中 维护 的 唯一 的 state, 消 除了 不 必要 的 多 种 states 带 来 的 
复杂 度 . 这 个 store 应 该 具有 能 被 我 们 订阅 (subscribe)store 中 变化 的 能 力 ,实现 如 下 : 


var Store = { 
_handlers: [], 
lag 
onChange: function (handler) { 
this. handlers.push(handler); 
tr 
set: function (value) { 
this. flag = value; 
this. handlers.forEach(handler => handler() ) 
ty 
get: function () { 
return this. flag; 
} 
}; 


然后 我 们 会 在 我 们 的 App 组 件 上 加 上 订阅 我 们 的 store 的 钧 子 , 当 每 次 store 发 生 改 变 
的 时 候 , 我 们 的 组 件 就 会 被 重新 的 泻 染 . 


class App extends React.Component { 
constructor(props) { 
super(props); 
Store.onChange(this.forceUpdate.bind(this)); 
} 


render() { 
return ( 
<div> 
<Switcher 
value={ Store.get() } 
onChange={ Store.set.bind(Store) }/> 
</div> 


); 


请 注意 我 们 使 用 了 forceUpdate 这 个 函数 ,但 是 事实 上 我 们 并 不 推荐 使 用 这 个 函数 . 


一 般 情 况 下 我 们 会 使 用 高 阶 组 件 去 帮 我 们 处 理 重 新 泻 染 的 事情 ,我 们 在 这 里 使 用 
forceUpdate 函 数 只 是 想 尽 可 能 的 保持 我 们 这 个 例子 简单 . 


因为 我 们 使 用 了 store, Swticher 这 个 组 件 就 变 得 超级 简单 了 . 我 们 不 需要 再 在 
Switcher 组 件 内 部 再 去 维护 一 份 State 了 : 


class Switcher extends React.Component { 
constructor(props) { 
super(props); 
this. onButtonClick = e => ( 
this.props.onChange(!this.props.value); 


} 
} 
render() { 
return ( 
«button onClick={ this. onButtonClick }> 
{ this.props.value ? 'lights on' : 'lights off' } 
«/button» 
); 
} 


使 用 单 向 数据 流 的 好 处 是 我 们 的 组 件 在 这 种 情况 下 变 得 非常 声明 式 , 成 为 了 所 谓 的 
纯 UI 组 件 , 只 是 我 们 Store 里 面 数据 的 表达 . React 在 诞生 之 初 就 是 为 了 解决 视图 层 
(View 层 ) 的 问题 , 其 核心 思想 也 是 从 视图 出 发 去 解决 问题 . 我 们 用 声明 式 的 方式 去 构 
建 我 们 的 应 用 , 让 我 们 的 组 件 变 得 尽 可 能 的 木偶 化 ,只 关心 我 们 的 数据 ,将 我 们 的 复杂 
的 数据 逻辑 交 由 我 们 的 store 去 处 理 . 这 也 是 我 们 去 构建 React 应 用 的 时 候 的 一 种 比较 
好 的 思路 . 


参考 资料 : 


e https://www.startuprocket.com/articles/evolution-toward-one-way-data-flow-a- 
quick-introduction-to-redux 


展示 组 件 和 容器 组 件 


问题 描述 


Ul 和 业务 逻辑 和 数据 混杂 在 一 起 . 


class Clock extends React.Component { 
constructor(props) { 
super (props); 
this.state = {time: this.props.time}; 
this._update = this._updateTime.bind(this); 


} 
render() { 

var time = this._formatTime(this.state.time); 

return ( 

<hi>{ time.hours } : { time.minutes } : { time.seconds }</ 
hi1» 

); 

} 


componentDidMount() { 
this._interval = setInterval(this._update, 1000); 


componentWillUnmount() { 
clearInterval(this._interval); 


_formatTime(time) { 
var [ hours, minutes, seconds ] = [ 
time.getHours(), 
time.getMinutes(), 
time.getSeconds() 
].map(num => num < 10 ? 'O' + num : num); 


return {hours, minutes, seconds}; 


_updateTime() { 
this.setState({time: new Date(this.state.time.getTime() + 10 
00)}); 
j 
j 


ReactDOM.render(«Clock time={ new Date() }/>, ...); 


解决 办 法 . 
我 们 将 组 件 拆 分 成 容器 (container) 组 件 和 UI(presentation) 组 件 
容器 组 件 


容器 组 件 关心 数据 (包括 数据 的 格式 和 数据 的 来 源 等 ). 容器 组 件 关 心 具体 的 业务 逻 
和 翌 ， 它 接收 数据 并 将 数据 整理 成 我 们 的 U| 组 件 需要 的 格式 传递 给 UI 组 件 . 我 们 常 使 用 
高 阶 组 件 去 建立 容器 组 件 . 一 般 情 况 下 , 容器 组 件 的 render 方 法 里 面包 含 的 只 会 是 U| 
组 件 . 


// Clock/index.js 
import Clock from './Clock.jsx"> /7 «-- Clockz— MIA 


export default class ClockContainer extends React.Component { 
constructor(props) { 
super(props); 
this.state - (time: props.time); 
this. update - this. updateTime.bind(this); 


render() ( 
beturn «Clock { -..this.-extract(thzs.state.time) }7>> 


componentDidMount() { 
this. interval - setInterval(this. update, 1000); 


componentWillUnmount() { 
clearInterval(this. interval); 


.extract(time) { 
return ( 
hours: time.getHours(), 
minutes: time.getMinutes(), 
seconds: time.getSeconds() 


HH 


_updateTime() { 
this.setState({time: new Date(this.state.time.getTime() + 10 
00)}); 
J 
3 


UI 组 件 


UI 组 件 关心 组 件 展示 出 来 是 什么 样子 . UI 组 件 一 般 由 基本 的 html 标 签 为 基础 , 用 以 在 
页 面 上 展示 . 理想 的 UI 组 件 应 该 被 设计 为 没有 外 部 依赖 的 组 件 . 常用 的 实现 是 使 用 没 
有 内 部 state 的 无 状态 组 件 (stateless function) 


7/ Clock/ Clock. jsx 
export default function Clock(props) { 
var [ hours, minutes, seconds ] = [ 
props.hours, 
props.minutes, 
props.seconds 
].map(num => num < 10 ? 'O' + num : num); 


return <hi>{ hours } : { minutes } : ( seconds }</h1>; 


m 


容器 组 件 封装 了 封装 了 业务 逻辑 , 并 且 可 以 灵活 的 讲 不 同 的 数据 注入 不 同 的 UI 组 件 
中 , 这 是 使 用 容器 组 件 带 来 明显 的 好 处 . 常见 使 用 容器 组 件 的 方法 是 我 们 不 去 在 容器 
组 件 内 部 规定 哪个 UI 组 件 将 被 泻 染 , 而 是 建立 一 个 接收 一 个 UI 组 件 的 函数 , 去 灵活 的 
让 我 们 的 容器 组 件 可 以 包 于 任意 UI 组 件 . 比如 , 和 使 用 下 面 的 形式 相 比 : 


import Clock from './Clock.jsx'; 
export default class ClockContainer extends React.Component { 
render() { 
return <Clock />; 


我 们 更 推荐 下 面 这 种 写法 : 


export default function (Component) { 
return class Container extends React.Component { 
render() { 
return <Component />; 


Presentational vs Container 


使 用 这 种 方法 ,我 们 的 容器 就 编程 了 能 演 染 任意 UI 组 件 的 容器 ,非常 的 灵活 , 回 到 时 钟 
的 例子 , 如 果 这 时 候 你 想 把 数 显 时 钟 变 成 一 个 指针 时 钟 , 只 需要 替换 容器 组 件 内 部 的 
UI 时 钟 组 件 就 可 以 了 . 


e https://medium.com/@dan_abramov/smart-and-dumb-components- 
7ca2f9a7c7d0#.mbglcakmp 

e https://github.com/krasimir/react-in- 
patterns/tree/master/patterns/presentational-and-container 

e https://medium.com/@learnreact/container-components-c0e67432e005 
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三 方 集 成 
下 面 这 篇 教程 会 简单 介绍 React 如 何 和 三 方 库 集 成 . 


在 这 个 例子 中 我 们 将 会 学 习 到 如 何 混合 使 用 React 和 jQuery UI 这 个 插件 . 我 们 选用 
了 tag-it 这 个 jQuery 插件 来 举例 . 这 个 插件 讲 无 序列 表 (unordered list) 转 化 成 input 标 
签 来 管理 . 


<ul> 
<li>JavaScript</1li> 
<1i>CSS</1i> 

</ul> 


为 了 让 上 面 这 段 代码 能 够 运行 , 我 们 需要 引入 jQuery, jQuery Ul 以 及 tag-it 这 个 插件 . 
使 用 插件 的 代码 如 下 . 


$('«dom element selector>').tagit(); 


我 们 选择 了 一 个 DOM 元 素 然后 调用 了 tagit 方 法 . 


首先 我 们 要 做 的 事情 是 对 Tags 这 个 组 件 我 们 需要 它 只 被 React 演 数 一 次 (single- 
renderer). 这 是 因为 当 React 演 染 出 我 们 想 控制 的 DOM 元 素 之 后 ,我 们 想 把 该 元 素 的 
控制 权 从 React 转 交 给 jQuery. 如 果 我 们 跳 过 了 这 一 步 ,那么 React 和 jQuery 会 对 相同 
的 DOM 元 素 进 行 控制 , 并 且 不 会 知道 彼此 的 存在 .为 了 实现 这 个 一 次 泻 梁 的 机 制 ,我 
们 需要 用 到 React 自 带 的 生命 周期 方法 shouldComponentupdate . 


当 我 们 想 以 编程 的 方式 在 已 有 的 tag-itDOM 对 象 上 添加 新 的 标签 时 , 这 一 行为 将 被 这 
个 React 组 件 触发 , 并 且 需 要 配合 上 jQuery API 一 起 才能 工作 . 我 们 需要 找到 一 种 方 
ik, 既 能 让 数据 和 Tags 组 件 交 互 ,又 能 保证 组 件 只 浑 染 一 次 .为 了 更 形象 的 描述 我 们 
的 实现 过 程 , 我 们 会 在 我 们 的 APP 组 件 里 面 添加 一 个 input 和 一 个 button. 当 button 被 
点 击 时 , 我 们 会 讲 一 个 string 传 递 到 Tags 组 件 中 . 


class App extends React.Component { 
constructor(props) { 
super(props); 


this. addNewTag - this. addNewTag.bind(this); 
this.state - ( 

tags: [ ‘JavaScript’, "CSS ' ] ， 

newTag: null 


}; 


_addNewTag() { 
this.setState({newTag: this.refs.field.value)); 


render() { 
return ( 
<div> 
<p>Add new tag:</p> 
<div> 
<input type='text' ref='field'/> 
«button onClick={ this. addNewTag }>Add</button> 
«/div» 
«Tags tags-( this.state.tags } newTag={ this.state.newTa 
g }/> 
«/div» 


); 


我 们 使 用 了 组 件 内 部 的 state 来 存储 我 们 新 加 入 的 field. 当 我 们 每 一 次 点 击 button 的 时 
tk, state 都 会 被 更 新 从 而 触发 Tags 组 件 的 重新 演 染 . 然而 , 因为 在 
shouldComponentUpdate 中 我 们 返回 了 false, 所 以 组 件 事 实 上 并 不 会 被 更 新 . 还 有 
另外 一 点 不 同 的 是 我 们 通过 另 一 个 生命 周期 方法 componentWillReceiveProps 取 到 
了 新 标签 的 值 , 同时 调用 tagit 方 法 来 增加 我 们 的 filed. 


class Tags extends React.Component { 
componentDidMount() { 
this.list = $(this.refs.list); 
this.list.tagit(); 


shouldComponentUpdate() { 
return false; 


componentWillReceiveProps(newProps) { 
this.list.tagit('createTag', newProps.newTag); 


render() { 
return ( 
«ul ref='list'> 
{ this.props.tags.map((tag, i) => <li key={ i }>{ tag } 
</li>) } 
</ul> 


); 


e https://github.com/krasimir/react-in-patterns/tree/master/patterns/third-party 


给 setState 传 入 回调 函数 


在 async-nature-of-setState 中 我 们 已 经 提 到 过 , setState 其 实 是 异步 的 . 因为 出 于 性 
能 优化 考虑 , React 会 将 5 次 setState 做 一 次 批 处 理 . 于 是 setState 并 不 会 在 被 调用 之 
后 立即 改变 我 们 的 state. 这 就 意味 着 你 并 不 能 依赖 于 在 调用 setState 方 法 之 后 state， 
因为 此 时 你 并 不 能 确认 该 state 更 新 与 否 . 当然 针对 这 个 问题 我 们 也 有 解决 办 法 -- 用 前 
一 个 state(previous state) 作 为 需要 传 入 函数 的 参数 ,将 一 个 函数 作为 第 二 个 参数 传递 
给 setState. 这 样 做 能 保证 你 传 入 的 函数 需要 取 到 的 state 一 定 会 是 被 传 入 的 setState 
执行 之 后 的 state. 


问题 


// assuming this.state.count === 0 

this.setState({count: this.state.count + 1}); 
this.setState({count: this.state.count + 1}); 
this.setState({count: this.state.count + 1}); 


^" 


M SehtS= sisaisemc oU === T MEO 


解决 办 法 


this.setState((prevState, props) => ({ 
count: prevState.count + props.increment 


})); 


a RE 


// Passing object 
this.setState({ expanded: !this.state.expanded }); 


// Passing function 
this.setState(prevState => ({ expanded: !prevState.expanded })); 


参考 资料 : 


Passing Function To setState() 


e setState() Gate 
e Do | need to use setState(function) overload in this case? 
e Functional setState is the future of React 
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X ffs & (Decorators) (*Xbabel X 4$, 在 03/17 之 后 作为 stage-2 的 proposal 被 引入 ) 


如 果 你 在 使 用 类 似 于 mobx 的 库 , 你 能 够 使 用 装饰 器 装饰 你 的 函数 . 装饰 器 本 质 上 其 
实 就 是 将 组 件 传 入 一 个 函数 . 使 用 装饰 器 能 让 组 件 更 灵活 ,更 可 读 并 且 更 易 修 改组 件 
的 功能 . 


不 使 用 装饰 器 的 例子 


class ProfileContainer extends Component { 
// Component code 


j 


export default observer(ProfileContainer) 


使 用 装饰 器 的 例子 


@observer 
export default class ProfileContainer extends Component { 
// Component code 


相关 文章 : 


e Enhancing React components with Decorators 


e Decorators != higher ordered components 

e React Decorator example - Module 

e What is the use of Connect(decorator in react-redux) 
e Decorators with React Components 

e Exploring ES7 decorators 

e Understanding Decorators 


A 4 
44 


Decorators 
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AB ~2 
功能 开关 
使 用 Redux 在 React 中 实现 Feature 标 记 符 


// createFeatureFlaggedContainer.js 

import React from 'react'; 

import { connect } from 'react-redux'; 

import { isFeatureEnabled } from './reducers' 


export default function createFeatureFlaggedContainer(1 
featureName, 
enabledComponent, 
disabledComponent 
jy 
function FeatureFlaggedContainer({ isEnabled, ...props }) { 
const Component = isEnabled ? enabledComponent : disabledCom 
ponent; 


if (Component) { 
return <Component {...props} />; 


// ^disabledComponent' is optional property 
return null; 


// Having ` displayName is very useful for debugging. 
FeatureFlaggedContainer.displayName = '"FeatureFlaggedContainer 
(${ featureName })`; 


return connect((store) => { 
isEnabled: isFeatureEnabled(store, featureName) 
})(FeatureFlaggedContainer ) ; 


Feature | 


// EnabledFeature.js 
import { connect } from 'react-redux'; 
import { isFeatureEnabled } from './reducers' 


function EnabledFeature({ isEnabled, children }) { 
if (isEnabled) { 
return children; 


return null; 


export default connect((store, { name }) => { 
isEnabled: isFeatureEnabled(store, name) 
))(EnabledFeature); 


// featureEnabled.js 
import createFeatureFlaggedContainer from './createFeatureFlagge 
dContainer' 


// Decorator for "Page" components. 
// usage: enabledFeature('unicorns')(UnicornsPage); 
export default function enabledFeature(featureName) { 
return (Component) -» ( 
return createFeatureFlaggedContainer ({ 

featureName, 

enabledComponent: Component, 

disabledComponent: PageNotFound, // 404 page or something 
similar 
3); 
3 
3 


Feature Flags 


// features.js 

// This is quite simple reducer, containing only an array of fea 
tures. 

// You can attach this data to a “currentUser” or similar reduce 
r. 


// ^BOOTSTAP' is global action, which contains the initial data 
for a page 

// Features access usually don't change during user usage of a p 
age 

const BOOTSTAP - 'features/receive'; 


export default function featuresReducer(state, { type, payload } 


) { 
if (type === BOOTSTAP) { 
return payload.features || []; 


return state || []; 


export function isFeatureEnabled(features, featureName) { 
return features.indexOf(featureName) !-- -1; 
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Feature Flags 


// reducers.js 
// This is your main reducer.js file 
import { combineReducers } from 'redux'; 


import features, { isFeatureEnabled as isFeatureEnabledSelector 
} from './features'; 


// ...other reducers 


export default combineReducers({ 


features 
// ...other reducers 
Pe 


// This is the important part, access to 'features' reducer shou 

ld only happens 

// via this selector. 

// Then you can always change where/how the features are stored. 

export function isFeatureEnabled({ features }, featureName) { 
return isFeatureEnabledSelector(features, featureName); 


e Feature flags in React 
e Gist 


组 件 切换 


一 个 可 切换 的 组 件 实际 上 是 包含 了 多 个 组 件 , 选择 泻 染 其 中 某 个 组 件 的 组 件 . 我 们 使 
用 对 象 来 将 props 的 值 和 组 件 做 上 映射 . 


import HomePage from './HomePage.jsx'; 

import AboutPage from './AboutPage.jsx'; 

import UserPage from './UserPage.jsx'; 

import FourOhFourPage from './FourOhFourPage.jsx'; 


const PAGES - ( 
home: HomePage, 
about: AboutPage, 
user: UserPage 


}; 


const Page = (props) => { 
const Handler = PAGES[props.page] || FourOhFourPage; 


return «Handler {...props} /> 


Hh 


// The keys of the PAGES object can be used in the prop types to 
catch dev-time errors. 
Page.propTypes = { 
page: PropTypes.oneOf(Object.keys(PAGES) ).isRequired 
3 


参考 资料 : 


e https://nackernoon.com/10-react-mini-patterns-c1da92f068c5 


深入 某 个 组 件 内 部 


通过 父 组 件 去 访问 子 组 件 . 比如 一 个 能 自动 focus 的 输入 框 (通过 父 组 件 控制 自动 
focus) 


子 组 件 


子 组 件 是 一 个 带 有 input 标 签 和 focus 方 法 的 组 件 . 其 中 focus 方 法 能 focus 到 对 应 的 
HTML 元 素 上 . 


Class Input extends Component { 
focus() { 
this.el.focus(); 


} 


render() { 
return ( 
<input 
ref={el=> { this.el = el; }} 
/> 


父 组 件 


在 父 组 件 中 ,我 们 能 得 到 子 组 件 的 引用 并 且 调 用 子 组 件 的 focus 方 法 . 


Reaching Into A Component 


class SignInModal extends Component { 
componentDidMount() { 


// Note that when you use ref on a component, it’s a referen 


ce to 


// the component (not the underlying element), so you have a 


ccess to its methods. 


this.InputComponent.focus(); 


render() { 
return ( 
<div> 
<label>User name:</label> 
<Input 
ref={comp => { this.InputComponent = comp; }} 
/> 
</div> 


e https://hackernoon.com/10-react-mini-patterns-c1da92f068c5 
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集合 组 件 
列表 和 其 他 类 型 的 集合 某 种 程度 上 也 可 以 用 组 件 来 描述 . 
为 了 避免 完全 给 列表 新 建 一 个 单独 的 组 件 , 我 们 可 以 使 用 以 下 这 种 写法 . 


const SearchSuggestions = (props) => { 
// renderSearchSuggestion() behaves as a pseudo SearchSuggesti 
on component 
// keep it self contained and it should be easy to extract lat 
er if needed 
const renderSearchSuggestion = listItem => ( 
«li key={listItem.id}>{listItem.name} {listItem.id}</1li> 


); 


return ( 
<ul> 
{props.listItems.map(renderSearchSuggestion) } 
</ul> 
); 
J; 


RIRE ERIAREN? J 他 什么 地 方 使 用 这 个 组 件 , 你 能 很 轻松 的 复制 
eee 到 新 的 组 件 中 . (不 要 过 度 设 计 组 件 ) If things get more complex or you 
want to use this component elsewhere, you should be able to copy/paste the code 
out into a new component. Don’t prematurely componentize. 


e https://nackernoon.com/10-react-mini-patterns-c1da92f068c5 


用 来 做 format 的 组 件 


在 我 们 需要 格式 化 字符 串 的 时 候 , 我 们 可 以 在 render 方 法 中 去 使 用 helper 函 数 . 然而 ， 
更 好 的 方法 是 去 使 用 一 个 组 件 去 做 这 件 事 ， 


使 用 组 件 的 做 法 


render 哆 数 的 实现 会 更 加 的 干净 因为 只 会 是 一 些 组 件 的 组 合 . 


const Price = (props) => { 
// toLocaleString Jf React 4 APIm </R 4 JavaScript A E 7 iX 
// https://developer.mozilla.org/en/docs/Web/JavaScript/Refere 
nce/Global_Objects/Number/toLocaleString 
const price = props.children.toLocaleString('en', ( 
style: props.showSymbol ? 'currency' : undefined, 
currency: props.showSymbol ? 'USD' : undefined, 
maximumFractionDigits: props.showDecimals ? 2 : 0 
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return «span className={props.className}>{price}</span> 


Hh 


Price.propTypes = { 
className: PropTypes.string, 
children: PropTypes.number, 
showDecimals: PropTypes.bool, 
showSymbol: PropTypes.bool 


m 


Price.defaultProps - ( 
children: 0, 
showDecimals: true, 
showSymbol: true, 


e 


const Page = () => { 
const lambPrice = 1234.567; 
const jetPrice = 999999.99; 


const bootPrice = 34.567; 


return ( 
<div> 
<p>One lamb is «Price className="expensive">{lambPrice}</P 
rice></p> 
<p>One jet is «Price showDecimals={false}>{jetPrice}</Price 
></p> 
<p>Those gumboots will set ya back 
<Price 
showDecimals={false} 
showSymbol={false}> 
{bootPrice} 
</Price> 
bucks. 
</p> 
</div> 
); 
3 


E ey d] 
RAS FF A 85 BK, 


代码 量 更 少 , 但 是 让 render 方 法 看 起 来 不 那么 干净 (作者 个 人 感觉 , 哈哈 ) 


function numberToPrice(num, options = {}) { 
const showSymbol = options.showSymbol !== false; 
const showDecimals = options.showDecimals !== false; 


return num.toLocaleString('en', { 


style: showSymbol ? 'currency' : undefined, 

currency: showSymbol ? 'USD' : undefined, 

maximumFractionDigits: showDecimals ? 2 : 0 
3); 


const Page = () => { 
const lambPrice = 1234.567; 
const jetPrice = 999999.99; 
const bootPrice = 34.567; 


return ( 
<div> 
<p>One lamb is «span className="expensive">{numberToPrice( 
lambPrice) }</span></p> 
<p>One jet is {numberToPrice(jetPrice, { showDecimals: fal 
se })}</p> 
<p>Those gumboots will set ya back 
{numberToPrice(bootPrice, { showDecimals: false, showSym 
bol: false })} 
bucks .</p> 
</div> 
); 
}; 


参考 资料 : 


e 10 React Mini Patterns 
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使 用 高 阶 组 件 能 在 很 多 的 UI 组 件 中 追踪 逻辑 . 例如 : 在 许多 组 件 中 加 入 分 析 数 据 的 追 
踪 . 


eg. Adding analytics tracking across various components. 


多 次 使 用 
我 们 的 组 件 还 是 能 保持 很 好 的 测试 性 ,不 会 被 这 个 tracking 组 件 影响 


e 一 次 实现 ， 
除 ， 


e Z T 


import tracker from './tracker.js'; 


// 高 阶 组件 
const pageLoadTracking = (ComposedComponent) => class HOC extends 
Component { 
componentDidMount() { 
tracker .trackPageLoad(this.props.trackingData) ; 


componentDidUpdate() { 
tracker .trackPageLoad(this.props.trackingData) ; 


render() { 
return <ComposedComponent {...this.props} /> 
J 
3 


// 用 法 
import LoginComponent from "./login"; 


const LoginWithTracking = pageLoadTracking(LoginComponent ) ; 


class SampleComponent extends Component { 
render() { 
const trackingData = {/** Nested Object **/}; 
return «LoginWithTracking trackingData={trackingData}/> 


坏 实 践 


就 悉 常 见 的 坏 实践 能 帮助 我 们 理解 React 是 如 何 工 作 的 并 且 给 我 们 重 构 代码 提供 不 
错 的 指导 . 


根据 props 去 初始 化 state 


前 言 : 
使 用 props 去 在 getlnitialState 中 生成 初始 state( 或 者 在 constructor 中 初始 化 ) 很 容 
易 导 致 多 个 数据 源 的 问题 , 也 会 给 使 用 者 带 来 这 样 的 疑问 ; RATI URL GE 89] 23 7. 
到 底 来 自 哪 ? 这 是 因为 getlnitialState 只 在 组 件 第 一 次 初始 化 的 时 候 被 调用 一 次 . 


这 样 做 的 危险 在 于 , 有 可 能 组 件 的 props 发 生 了 改变 但 是 组 件 却 没有 被 更 新 .( 见 下 面 
的 例子 ) 新 的 props 的 值 不 会 被 React 认 为 是 更 新 的 数据 因为 构造 器 (constructor) 或 者 
getlnitialState 方 法 在 组 件 创建 之 后 不 会 再 次 被 调用 了 ,因此 组 件 的 state 不 再 会 被 更 
新 . 要 记 住 , State 的 初始 化 只 会 在 组 件 第 一 次 初始 化 的 时 候 发 生 . 


坏 的 实践 


class SampleComponent extends Component ( 
// constructor function (or getInitialState) 
constructor(props) { 
super(props); 
this.state = { 
flag: false, 
inputVal: props.inputValue 
H 
J 


render() { 
return <div>{this.state.inputVal && <AnotherComponent/>}</div 


} 
} 


[| 


好 的 实践 


Props In Initial State 


class SampleComponent extends Component ( 
// constructor function (or getInitialState) 
constructor(props) ( 
super(props); 
this.state - ( 
flag: false 


Hh 


render() ( 
return <div>{this.props.inputValue && <AnotherComponent/>}</ 
div> 


e React Anti-Patterns: Props in Initial State 
e Why is passing the component initial state a prop an anti-pattern? 
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使 用 refs 而 不 是 findDOMNode() 去 获取 DOM 
3 A. 


注意 : React 实 际 上 也 支持 使 用 字符 串 作为 ref, 来 访问 DOM 节 点 . 但 是 需要 注意 的 是 
这 是 一 种 已 经 不 被 官方 推荐 的 用 法 . 


e 更 多 关于 ref 的 知识 
e 为 什么 字符 串 形式 的 ref 已 经 不 被 推荐 了 ? 


使 用 this 找 到 DOM 节 点 
以 前 的 做 法 : 
class MyComponent extends Component { 


componentDidMount() { 
findDOMNode(this).scrollIntoView(); 


render() { 
return «div /» 


使 用 ref 之 后 的 做 法 


class MyComponent extends Component { 
componentDidMount() { 
this.node.scrollIntoView(); 


render() ( 
return «div ref={node => this.node = node}/> 


使 用 字符 串 ref 找 到 DOM 节 点 


使 用 字符 串 ref 的 做 法 


class MyComponent extends Component { 
componentDidMount() { 
findDOMNode(this.refs.something).scrollIntoView(); 


render() ( 
return ( 
«div» 
«div ref='something'/> 
«/div» 


使 用 回调 ref 的 做 法 


class MyComponent extends Component { 
componentDidMount() { 
this.something.scrollIntoView(); 


render() ( 
return ( 
«div» 
«div ref={node => this.something = node}/> 
</div> 


调用 子 组 件 的 ref 


不 使 用 ref 的 做 法 : 


class Field extends Component { 
render() { 
return <input type='text'/> 


class MyComponent extends Component { 
componentDidMount() { 
findDOMNode(this.refs.myInput).focus(); 


render() ( 
return ( 
«div» 
Hello, 
«Field ref-'myInput'/» 
«/div» 


使 用 ref 的 做 法 


class Field extends Component { 
render() { 
return ( 


<input type='text' ref={this.props.inputRef}/> 


class MyComponent extends Component { 
componentDidMount() { 
this.inputNode.focus(); 


render() { 
return ( 
<div> 
Hello, 


<Field inputRef={node => this.inputNode = node}/> 
</div> 


e ESLint Rule proposal: warn against using findDOMNode() 
e Refs and the DOM 


请 使 用 高 阶 组 件 而 不 是 Mixin 
简单 的 例子 


// 使 用 mixin 
var WithLink = React.createClass({ 
mixins: [React.addons.LinkedStateMixin], 
getInitialState: function () { 
return {message: 'Hello!'}; 
3 
render: function () ( 
return «input type="text" valueLink-[(this.linkState('message 
')}/>; 
} 
3); 


// 使 用 高 阶 组 件 的 做 法 
var WithLink = React.createClass({ 
getInitialState: function () { 
return (message: 'Hello!'}; 
tr 
render: function () ( 
return <input type="text" valueLink={LinkState(this, message 
')}/>; 
} 
3); 


更 加 详细 的 例子 


// 使 用 Mixin Mixin 
var CarDataMixin = { 
componentDidMount: { 
// fetch car data and 
// call this.setState((carData: fetchedData}), 
// once data has been (asynchronously) fetched 


e 


var FirstView = React.createClass({ 
mixins: [CarDataMixin], 
render: function () { 
return ( 
<div> 
<AvgSellingPricesByYear country="US" dataset={this.state 
.carData}/> 
<AvgSellingPricesByYear country="UK" dataset={this.state 
.carData}/> 
<AvgSellingPricesByYear country="FI" dataset={this.state 
.carData}/> 
</div> 


3); 


// 使 用 高 阶 组 件 
var bindToCarData = function (Component) { 
return React.createClass({ 
componentDidMount: { 
// fetch car data and 
// call this.setState({carData: fetchedData}), 
// once data has been (asynchronously) fetched 


ty 


render: function () { 
return <Component carData={ this.state.carData }/> 
} 
}); 
}; 


// 将 你 的 组 件 使 用 高 阶 组 件 包 右 起 来 
var FirstView = bindToCarData(React.createClass({ 
render: function () { 
return ( 
<div> 
<AvgSellingPricesByYear country="US" dataset={this.props 
.carData}/> 


Mixins 


<AvgSellingPricesByYear country="UK" dataset={this.props 
.carData}/> 
<AvgSellingPricesByYear country="FI" dataset={this.props 
.carData}/> 
</div> 


e Mixins are dead - Long live higher ordercomponents 

e Mixins are considered harmful 

e Stackoverflow: Using mixins vs components for code reuse 
e Stackoverflow: Composition instead of mixins in React 
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避免 在 componentWillMount() 中 使 用 进 
fT setState 操作 . 


componentWillMount() 在 组 件 将 要 挂 载 时 被 立即 调用 . 这 个 调用 发 生 

在 render() 函数 执行 之 前 , 所 以 如 果 在 componentwillMount 里 面 设 置 了 state， 
这 个 设置 的 state 是 不 会 触发 重新 泻 染 的 . 同样 我 们 也 需要 注意 不 要 

在 componentwillMount() 中 引入 其 他 可 能 会 导致 问题 的 代码 . 


如 果 你 有 类 似 的 需求 , 请 在 componentDidMount 里 面 完 成 . 


function componentDidMount() { 
axios.get( api/messages ) 
.then((result) => { 
const messages = result.data 
console.log("COMPONENT WILL Mount messages : 


this.setState({ 
messages: [...messages.content] 


}) 
}) 


", messages); 


不 使 用 setState() 去 操作 state 


导致 的 问题 


e 在 state 改 变 时 组 件 不 会 重新 泻 X. 
e 在 未 来 某 个 时 候 如 果 通 过 setState 改 变 了 state, 那么 这 次 未 通过 setState 去 改变 
的 state 将 会 同样 生效 . 


坏 实 践 


class SampleComponent extends Component ( 
constructor(props) { 
super (props); 


this.state = { 
items: ['foo', 'bar'] 


}; 


this.handleClick = this.handleClick.bind(this); 


handleClick() { 
// RER: 我 们 手动 更 改 了 State 而 不 是 通过 SetState 有 函数 ， 
this.state.items.push('lorem'); 


this.setState({ 
items: this.state.items 


3); 


render() { 
return ( 
«div» 
{this.state.items.length} 
<button onClick={this.handleClick}>+</button> 
</div> 


好 实践 


Mutating State 


class SampleComponent extends Component ( 
constructor(props) (1 
super(props); 


this.state - ( 
items: ['foo', 'bar'] 


}; 


this.handleClick = this.handleClick.bind(this); 


handleClick() { 
// 我 们 使 用 了 setState( ) 方 法 来 更 新 State， 组 件 将 会 在 State 更 改 后 被 更 新 ， 


this.setState({ 
items: this.state.items.concat('lorem') 


3): 


render() ( 
return ( 
«div» 
{this.state.items.length} 
<button onClick={this.handleClick}>+</button> 
</div> 


React Design Patterns and best practices by Michele Bertoli. 
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使 用 简单 索引 作为 key 


Keys 应 该 是 稳定 ,可 预测 ,并 且 唯 一 的 . 这 样 React 才 能 正确 追踪 到 某 一 个 元 素 . 


At. 3: B 


在 下 面 这 段 代 码 中 ,每 个 元 素 的 key 事 实 上 是 它 在 todos 这 个 数组 里 面 的 顺序 , 而 事实 
上 更 好 的 实践 应 该 是 把 key 和 我 们 想 要 表达 的 数据 紧 紧 关联 在 一 起 . 下 面 这 种 做 法 会 
阻碍 React 对 于 我 们 组 件 的 优化 . 


{todos.map((todo, index) => 
<Todo 
(oe COdO} 
key={index} 
/> 
)} 


好 实践 


假设 todo.id 是 唯一 的 并 且 稳定 的 , React 便 能 更 好 的 去 控制 这 些 组 件 的 更 新 (否则 
我 们 可 能 会 面临 大 量 重复 创建 的 组 件 , 并 且 每 次 更 新 都 是 重新 render 这 些 组 件 .) 


{todos.map((todo) => 
«Todo {...todo} 
key={todo.id} /> 
)} 


参考 资料 : 


e React docs 
e Lin Clark's code cartoon 


Tt props% + 4% 2] DOME 


当 我 们 将 展 平 (spread) 的 props 传 入 子 组 件 时 我 们 便 引 入 了 风险 , 因为 我 们 可 能 往 
HTML 标 签 上 添加 了 它 并 不 支持 的 属性 . 


坏 实 践 


下 面 这 个 例子 会 在 DOM 元 素 上 增加 一 个 该 元 素 本 身 并 不 支持 的 属性 flag. 


const Sample = () => («Spread flag={true} className="content"/>) 


const Spread = (props) => (<div {...props}>Test</div>); 


好 实践 


如 果 将 HTML DOM 元 素 需 要 接受 的 props 分 离 出 来 再 展开 传 入 , 会 是 一 种 更 安全 的 做 
法 . 


const Sample = () => (<Spread flag={true} domProps={{className: " 
content"}}/>); 
const Spread = (props) => («div {...props.domProps}>Test</div>); 


EUS O 
或 者 我 们 也 可 以 使 用 ...rest 去 过 滤 掉 那些 HTML DOM 并 不 支持 的 属性 . 


const Sample = () => («Spread flag={true} className="content"/>) 
const Spread = ({ flag, ...domProps }) => (<div {...domProps}>Te 
St=/div>); 


在 这 种 情况 下 ， ae 1 PureComponent&, 即使 domProps 没有 变化 时 , 组 件 
还 是 会 被 重新 泻 染 . 因为 PureComponent 对 于 对 象 使 用 的 是 浅 比 较 


Spreading Props on DOM elements 


参考 资料 : 


e React Design Patterns and best practices by Michele Bertoli. 
e |n React, children are just props: Kent C. Dodds' Tweet 
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Handling UX variations for multiple brands 
and apps 


Vasa 做 的 关于 react 组 件 复 用 的 演讲 


以 下 是 一 些 有 助 于 编写 高 复 用 性 react 组 件 的 通用 编码 原则 。 


单 功能 原则 

使 用 react 时 

组 件 或 容器 的 代码 在 根本 上 必须 只 负责 一 块 U| 功 能 。 
e 以 设计 收 货 地 址 组 件 为 例 


e 收 货 地 址 组 件 可 以 拆 分 为 地 址 组 件 (只 含有 地 址 相关 内 容 ) ， 姓 名 组 件 (包括 
姓氏 和 名 字 ) ， 电 话 组 件 ， 省 ， 市 和 邮政 编码 组 件 。 


使 用 redux 时 


All API related call go into Redux thunks/other async handling sections (redux- 
promise, sagas etc) /t A API4 KARE T VA& A redux S, & Hest HR ( toredux- 
promise, sagas ) 来 处 理 。 模 块 可 以 如 下 划分 : 


e 一 些 模块 只 负责 在 AJAX 请 求 成 功 或 失败 的 时 候 派 发 动作 。 


e 一 些 模块 通过 promise 来 接收 。 


让 组 件 保持 简单 (KISS) 


e. 如 果 组 件 根本 不 需要 状态 ， 那 么 就 使 用 函数 定义 的 无 状态 组 件 。 


e 从 性 能 上 来 说 ， 函 数 定 义 的 无 状态 组 件 > ES6 class 定义 的 组 件 > 通过 
React.createClass() 定 义 的 组 件 。 


e 仅 传递 组 件 所 需要 的 属性 。 只 有 当 属 性 列表 太 长 时 ， 才 使 用 {...this.props} 进 行 
传递 。 


e WRAP OAKS HPI (if-else 4) ) 通常 意味 着 这 个 组 件 需要 被 拆 
分 成 更 细 的 组 件 或 模块 。 


e 还 有 一 点 ， 使 用 明确 的 命名 能 够 让 开发 者 明白 它 的 功能 ， 有 助 于 组 件 复 用 。 


相关 文章 


Building React Components for Multiple Brands and Applications 


使 用 组 合 去 实现 不 同 的 交互 功能 

在 React 的 实践 中 , 将 小 的 可 复 用 的 组 件 组 合成 功能 更 复杂 的 组 件 是 一 种 推荐 的 实 
BR, 

我 们 怎么 保证 组 件 的 复 用 性 ? 


e 我 们 需要 保证 组 件 是 纯 的 UI 组 件 , 传 入 同样 的 props 总 会 泻 染 出 相同 的 组 件 .( 木 
偶 组 件 ) 
复 用 意味 着 什么 ? 


。 在 组 件 内 部 没有 与 外 部 的 数据 交互 (这 应 该 在 Redux 中 完成 ) 

e 如 果 有 需要 从 API 获 取 的 数据 , 请 使 用 redux-thunk. redux-thunk 和 redux 容 器 是 
相互 隔离 的 , 我 们 可 以 通过 redux-thunk 获 取 数 据 , 然后 通过 redux 容 器 将 数据 以 
props 的 形式 传递 到 我 们 的 子 组 件 里 面 去 . 


如 果 我 们 在 render 函数 里 面 使 用 了 很 多 renderxxx() 该 怎么 办 ? 


e 如 果 使 用 或 者 创建 了 很 多 renderxxx() 函 数 , 这 往往 意味 着 这 些 renderxxx() 函 数 
是 可 以 变 成 可 复 用 的 小 组 件 的 . 


T 

千变万化 的 登录 页 面 

用 户 登 录 页 面 可 能 变化 很 多 , 根据 用 户 登 录 情 况 会 打开 /关闭 某 些 功能 或 者 显示 /隐藏 
t 


些 打 开 / 关 闭 的 功能 应 该 被 封装 在 一 个 子 组 件 里 面 ， e LA 情况 下 都 要 显 
示 的 元 素 (header/footer), 我 们 可 以 抽取 出 来 放 在 父 组 件 中 进行 复 用 . 


import React, { Component } from "react"; 
import PropTypes from 'prop-types'; 
import SignIn from "./sign-in"; 


class MemberSignIn extends Component { 
.renderMemberJoinLinks() { 
return ( 
<div className-"member-signup-links"» 


</div> 


); 


_routeTo() { 
// Routing logic here 


render() { 
const {forgotEmailRoute, forgotPwdRoute, showMemberSignupLink 
s} = this.props; 


return ( 
<div> 
«SignIn 
onForgotPasswordRequested={this._routeTo(forgotPwdRout 
e)} 
onForgotEmailRequested-[this. routeTo(forgotEmailRoute 
)}> 
{this.props.children} 
{showMemberSignupLinks && this._renderMemberJoinLinks( 
)} 
«/SignIn» 
«/div» 
); 
} 
} 


export default MemberSignIn; 


Composing UX Variations 


参考 资料 : 


e Slides from my talk: Building Multi-tenant UI with React 
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样式 开关 

我 们 也 可 以 通过 开 / 关 某 个 功能 来 实现 我 们 我 们 组 件 的 多 样 性 . 而 这 些 开 关 我 们 可 以 
通过 props 传 递 进 我 们 的 组 件 . 

Toggle 并 不 是 万 能 的 : 


如 果 抱 着 toggle 的 想法 , 我 们 很 容 多 将 一 个 组 件 设 计 成 一 个 万 能 组 件 , 通过 传 入 一 大 
堆 props 来 完成 多 样 性 , 这 其 实 并 不 是 特别 好 的 实践 . 所 以 我 们 最 好 遵守 以 下 两 点 : 


e 只 将 必须 的 props 传 入 我 们 的 组 件 , 而 且 当 props 太 多 时 需要 考虑 抽取 子 组 件 . 
e. 不 要 违背 单一 职责 原则 . 


例子 


在 登录 表单 中 显示 /隐藏 password 


Toggle UI Elements 


class PasswordField extends Component { 
render() { 
const { 
password, 
showHidePassword, 
showErrorOnTop, 
showLabels, 
shouldComplyAda 
} = this.props; 
return ( 
<div> 
<Password 
field={password} 
label="Password" 
showErrorOnTop={showErrorOnTop} 
placeholder={shouldComplyAda ? "" : "Password") 
showLabel={showLabels} 
showHidePassword={ showHidePassword} 
i> 
</div> 


); 


参考 资料 : 


e Slides from my talk: Building Multi-tenant UI with React 


用 高 阶 组 件 去 实现 功能 开关 


使 用 高 阶 组 件 去 实现 我 们 的 toggle, 从 而 实现 组 件 的 多 样 性 


比如 下 面 的 例子 , 实现 某 个 功能 的 开 / 关 


// featureToggle. js 
const isFeatureOn - function (featureName) ( 
// return true or false 


}; 
import { isFeatureOn } from './featureToggle'; 


const toggleOn = (featureName, ComposedComponent) => class HOC e 
xtends Component { 
render() { 
return isFeatureOn(featureName) ? <ComposedComponent {...thi 
s.props} /> : null; 
j 
tr 


// 用 法 
import AdsComponent from './Ads' 
const Ads = toggleOn('ads', AdsComponent) ; 


1& M St 2 + props R. 


Props 代 理 


使 用 高 阶 组 件 能 帮助 我 们 对 于 传 入 的 props 进 行 修饰 后 传 入 真正 的 组 件 ( 类 似 于 
middleware 的 概念 ) 


function HOC(WrappedComponent) { 
return class Test extends Component { 
render() { 
const newProps = { 

title: 'New Header', 

footer: false, 

showFeatureX: false, 
showFeatureY: true 


P 


return <WrappedComponent {...this.props} {...newProps} /> 


Wrapper Components 


对 我 们 的 组 件 进行 包装 来 适 配 不 同 的 样式 /交互 行为 . 如 果 你 想 处 理 <div> 或 者 其 
他 HTML 标 签 的 话 , 你 可 以 使 用 组 合 . 


当 你 创建 React 实 例 的 时 候 , 你 能 在 jsx 标 签 内 包 衰 其 他 的 React 组 件 或 者 任意 的 
JavaScript 表 达 式 . 父 组 件 通过 this.props.children 能 访问 到 其 包 庄 的 子 组 件 . 


const SampleComponent = () => { 
<Parent> 
<Chald /> 
</Parent> 


x 


const Parent = () => { 
你 能 使 用 class 'bla' 或 者 其 他 的 class 来 给 子 组 件 加 上 不 同 的 样式 ， 
<div className="bla"> 
{this.props.children} 
</div> 


Po 


值得 一 提 的 是 , E RA T] E T VA at Mage RAR HTMLA. 但 是 
一 般 情况 下 我 们 不 推荐 这 么 做 , 因为 这 样 做 的 话 你 就 不 能 添加 属性 或 者 传 入 props 了 . 


const SampleComponent = () => { 
«Wrap tagName="div" content="Hello World" /> 


}; 
const Wrap = ({ tagName, content }) => { 


const Tag = ${tagName} ` // 变量 名 必须 大 写 开 头 因为 这 是 一 个 组 件 ， 
return <Tag>{content}</Tag> 


e Slides from my talk: Building Multi-tenant UI with React 


Wrapper Components 
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以 不 同 的 顺序 展示 我 们 的 UI 组 件 


我 们 使 用 props 来 定 下 我 们 显示 的 顺序 . 我 们 的 组 件 基于 我 们 排 好 序 的 props 进 行 演 


Zu 
N. 


class PageSections extends Component { 
render() { 
const pageItems = this.props.contentOrder .map( 
(content) => { 
const renderFunc = this.contentOrderMap[content]; 


return (typeof renderFunc === 'function') ? renderFunc() 
S nui: 
} 
); 
return ( 
«div className="page-content"> 
{pageItems} 
</div> 


参考 资料 : 


e Slides from my talk: Building Multi-tenant UI with React 


Perf Tips 


基本 准则 
e 在 shouldComponentUpdate 中 避免 不 必要 的 检查 . 
e 使 用 不 可 变数 据 类 型 (Immutable)， 
e. 编写 针对 产品 环境 的 打包 配置 (Production Build). 
e 通过 Chrome Timeline 来 记录 组 件 所 耗费 的 资源 . 


e 在 componentWillMount 或 者 componentDidMount 里 面 通 
过 setTimeOut 或 者 requestAnimationFram 来 延迟 执行 那些 需要 大 量 计 算 
的 任务 . 


相关 文章 
Optimizing Performance: Docs 
Performance Engineering with React 


Tips to optimise rendering of a set of elements in React 


React.js Best Practices for 2016 


shouldComponentUpdate/£ & 


合理 的 实现 shouldComponentUpdate 能 够 避免 不 必要 的 重新 泻 沫 . 


React 会 在 props 和 state 发 生 改 变 的 时 候 重新 泻 染 组件 . 试想 一 下 当 每 次 有 props 和 
state 发 生 改变 时 (可 能 只 是 一 个 很 小 的 用 户 动 作 ), 整个 页 面 都 会 重新 泻 染 一 次 , 这 从 
性 能 上 来 说 肯定 不 能 令 人 满意 . 这 就 是 shouldcomponentUpdate 这 个 生命 周期 函 
数 发 挥 作 用 的 时 候 了 . 当 React 想 要 重新 泻 染 组 件 时 , React 会 检 

Æ shouldComponentUpdate 这 个 函数 是 返回 true 还 是 false( 这 将 决定 组 件 是 否 更 
新 .)React 默 认 这 个 函数 是 返回 true 的 ,意味 着 无 论 state 还 是 props 发 生变 化 , 组 件 都 
将 被 更 新 ). 所 以 对 于 那些 不 需要 变化 的 组 件 , 我 们 可 以 直接 返回 false 来 阻止 组 件 更 
新 ,以 此 提升 性 能 . 但 更 多 的 时 候 , 我 们 需要 在 这 个 函数 内 写 自己 的 逻辑 来 判断 组 件 是 


坏 实 践 


const AutocompleteItem = (props) => { 
const selectedClass = props.selected === true ? "selected" : "" 


var path = parseUri(props.url).path; 


path = path.length <= 0 ? props.url : "..." + path; 
return ( 
<li 


onMouseLeave={props.onMouseLeave } 
className={selectedClass}> 
«i className="i0on-ios-eye" 
data-image={props.image} 
data-url={props.url} 
data-title={props.title} 
onClick={props.handlePlanetViewClick}/> 
<span 
onMouseEnter={props.onMouseEnter } 


<div className="dot bg-mint"/> 
{path} 
</span> 
</li> 


); 


export default class AutocompleteItem extends React.Component { 
shouldComponentUpdate(nextProps, nextState) { 
Lit 
nextProps.url !-- this.props.url | | 
nextProps.selected !-- this.props.selected 
jo 


return true; 


} 


return false; 


render() { 
const {props} = this; 
const selectedClass = props.selected === true ? "selected" 
var path = parseUri(props.url).path; 
path = path.length <= 0 ? props.url : "..." + path; 


return ( 
<li 
onMouseLeave={props.onMouseLeave} 
className={selectedClass}> 
«i className="ion-ios-eye" 
data-image={props. image} 
data-url={props.url} 
data-title={props.title} 
onClick={props.handlePlanetViewClick}/> 
<span 
onMouseEnter={props.onMouseEnter }> 
<div className="dot bg-mint"/> 
{path} 
</span> 
</li> 


); 





shouldComponentUpdate() check 


e React Performance optimization 
e React rendering misconception 


92 


使 用 Pure Component 


Pure Component 默 认 会 在 shouldComponentUpdate 方法 中 做 浅 比 较 . 这 种 实现 可 
VA 3E se, v] VASEE RRA Estate A propost A AiR EY $ 3178 Ae. 


Recompose 提 供 了 一 个 叫 pure 的 高 阶 组 件 来 实现 这 个 功能 , React 在 v15.3.0 中 正 
式 加 入 了 React.PureComponent . 


XR 3t FR 


export default (props, context) => ( 
// ... do expensive compute on props ... 
return «SomeComponent {...props} /> 


好 实践 


import { pure } from 'recompose'; 
// This won't be called when the props DONT change 
export default pure((props, context) => { 

// ... do expensive compute on props ... 

return <SomeComponent someProp={props.someProp}/> 


}) 


更 好 的 写法 


Using Pure Components 


// This is better mainly because it uses no external dependencie 
Ss 
import { PureComponent ) from 'react'; 


export default class Example extends PureComponent ( 
// This won't re-render when the props DONT change 
render() { 
// ... do expensive compute on props 
return «SomeComponent someProp={props.someProp}/> 


e Recompose 


Higher Order Components with Functional Patterns Using Recompose 


React: PureComponent 


Pure Components 
Top 5 Recompose HOCs 
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使 用 Reselect 


在 React-Redux 的 connect(mapState) 中 使 用 Reselect, 这 能 避免 频繁 的 重新 泻 染 的 
发 生 . 


坏 实 践 


let App = ({otherData, resolution}) => ( 
<div> 
<DataContainer data={otherData}/> 
<ResolutionContainer resolution={resolution}/> 
</div> 


); 


const doubleRes = (size) => ({ 
width: size.width * 2, 
height: size.height * 2 

3); 


App = connect(state => { 
return { 
otherData: state.otherData, 
resolution: doubleRes(state.resolution) 


} 
3) (App); 


在 上 面 的 代码 中 , — € otherData X 41 rx, 那么 DataContainer 和 
ResolutionContainer 两 者 都 会 发 生 重 新 泻 染 , 即使 在 resolution 的 state 并 没有 发 生 改 
变 时 也 是 这 样 . 这 是 因为 doubleRes 这 个 函数 总 是 会 返回 一 个 新 的 resolutiond 对 象 的 
实体 . 如 果 doubleRes 有 函数 通过 Reselect 方 式 编写 就 没有 这 个 问题 了 . Reslect 会 记录 
下 上 一 次 函数 调用 的 结果 并 且 当 再 次 以 相同 方式 调用 时 返回 相同 的 结果 (而 不 是 创建 
一 个 一 模 一 样 的 新 结果 ). 只 有 当 传 入 的 参数 不 同时 , 才 会 产生 新 的 结果 . 


好 实践 


import { createSelector } from 'reselect'; 
const doubleRes = createSelector( 
r => r.width, 
r => r.height, 
(width, height) => ({ 
width: width * 2, 
height: height * 2 
3) 
); 


参考 资料 : 


e React 
e Computing Derived Data: Docs 


React ? ££ X 


在 这 一 个 章节 中 我 们 会 提供 一 些 CSS In JS 的 实践 . 

如 果 你 还 不 太 明 白 为 什么 要 CSS In Js, 作者 vasan 推 荐 你 看 一 看 下 面 的 talk by 
Vjeux 

相关 文章 

Patterns for style composition in React 


Inline style vs stylesheet performance 


给 无 状态 的 纯 UI 组 件 应 用 样式 


请 保持 样式 远离 那些 离 不 开 state 的 组 件 . 比如 路 由 , 视图 , 容器 , 表单 , 布局 等 等 不 应 
该 有 任何 的 样式 或 者 css class 出 现在 组 件 上 . 相反 , 这 些 复 杂 的 业务 组 件 应 该 有 一 些 
带 有 基本 功能 的 无 状态 U 组 件 组 成 . 


没有 任何 样式 /classNames 的 Form 组 件 , 公有 纯 的 组 件 组 合 而 成 . 


class SampleComponent extends Component { 
render() { 
return ( 
<form onSubmit={this.handleSubmit}> 
<Heading children='Sign In'/> 
<Input 
name='username' 
value={username} 
onChange={this.handleChange}/> 
<Input 
type='password' 
name='password' 
value={password} 
onChange={this.handleChange}/> 
<Button 
type="submit ' 
children='Sign In'/> 
</form> 


// 表达 组 件 ( 带 样式 ) 
const Button = ({ 
...props 
P = | 
const sx = { 
fontFamily: 'inherit', 
fontSize: 'inherit', 
fontWeight: 'bold', 


textDecoration: 'none', 
display: 'inline-block', 
margin: 0, 

paddingTop: 8, 
paddingBottom: 8, 
paddingLeft: 16, 
paddingRight: 16, 
border: 0, 

color: 'white', 
backgroundColor: 'blue', 
WebkitAppearance: 'none', 
MozAppearance: 'none' 


return ( 
«button {...props} style={sx}/> 


样式 模块 (style module) 


一 般 来 说 , 在 组 件 内 写 死 (hard code) 样 式 应 该 是 要 被 避免 的 . 这 些 有 可 能 被 不 同 的 UI 
组 件 分 享 的 样式 应 该 被 分 开放 入 对 应 的 模块 中 . 


// 样式 模块 

export const white = 'zfff'; 
export const black = '#111'; 
export const blue = '#07c'; 


export const colors = { 
white, 
black, 
blue 


e 


export const space - [ 


]; 


const styles = { 
bold: 600, 
space, 
colors 


iz 


export default styles 


Usage 


YL utt omnes 
import React from 'react' 
import { bold, space, colors } from './styles' 


const Button - (( 

. . ,props 

}) => { 

const sx = { 
fontFamily: 'inherit', 
fontSize: 'inherit', 
fontWeight: bold, 
textDecoration: 'none', 
display: 'inline-block', 
margin: 9, 
paddingTop: space[i], 
paddingBottom: space[i], 
paddingLeft: space[2], 
paddingRight: space[2], 
border: 0, 
color: colors.white, 
backgroundColor: colors.blue, 
WebkitAppearance: 'none', 
MozAppearance: 'none' 


m 


return ( 
«button [...props) style={sx}/> 


样式 函数 (Style Functions) 


为 在 React 中 可 以 很 方便 的 使 用 JavaScript, 所 以 我 们 能 使 用 helper 函 数 来 帮 我 们 
处 理 样式 相关 的 问题 . 


第 一 个 例子 
一 个 用 rgba 格 式 来 创造 黑色 的 函数 . 


const darken = (n) => “rgba(0, ©, ©, ${n})°; 
darken(1 / 8); // 'rgba(0, 0, 0, 0.125)' 


const shade = [ 


darken(0), 
darken(1 / 8), 
darken(i / 4), 
darken(3 / 8), 
darken(1 / 2), 
darken(5 / 8), 
darken(3 / 4), 
darken(7 / 8), 
darken(1) 

l; 

// 现在 ， 


// shade[4] 就 是 'rgba(0, 0, 0, 0.5)' 
第 二 个 例子 
给 margin 和 padding 创 建 一 个 比例 来 保持 视觉 节奏 的 一 致 


// Modular powers of two scale 
const scale = [ 


1; 


// 通过 这 个 函数 去 取得 一 部 分 的 样式 


const createScaledPropertyGetter = (scale) => (prop) => (x) => { 


return (typeof x === 'number' && typeof scale[x] === 'number') 
? {[prop]: scale[x]} 
a gibi lak 
3 


const getScaledProperty - createScaledPropertyGetter(scale); 


export const getMargin = getScaledProperty('margin'); 
export const getPadding - getScaledProperty('padding'); 
// 样式 函数 的 用 法 
const Box = ({ 
m, 
p, 
.. props 
WD = 
const sx = { 
...getMargin(m), 
...getPadding(p) 
H 


return «div {...props} style={sx}/> 
tr 


// 组 件 用 法 ， 
const Box = () => ( 
<div> 
<Box m={2} p={3}> 
A box with 16px margin and 32px padding 
</Box> 
</div> 


); 


使 用 npm 模 块 


对 于 那些 比较 复杂 的 样式 / 闫 色 转 换 , 使 用 不 同 的 npm 模 块 有 时 会 是 比 自己 造 轮子 更 
好 的 选择 


Example 


对 于 在 CSS 中 的 暗色 梯度 , 我 们 可 以 使 用 chroma-js 这 个 模块 
import chroma from 'chroma-js' 
const alpha = (color) => (a) => chroma(color)-alpha(a).css()- 
const darken = alpha('#000'); 


const shade = [ 
darken(0), 
darken(1 / 8), 
darken(i / 4) 
// More... 


1; 


const blueAlpha = [ 
alpha(blue) (0), 
alpha(blue)(i / 4), 
alpha(blue)(1 / 2), 
alpha(blue)(3 / 4), 
alpha(blue) (1) 

l; 


基础 组 件 (样式 通过 props 传 入 的 组 件 ) 
使 用 基础 组 件 


在 React 中 使 用 组 合 的 思想 去 构建 我 们 的 UUI 会 带 来 很 大 的 灵活 性 , 因为 我 们 的 组 件 从 
另 一 个 角度 来 看 都 是 函数 . 通过 改变 组 件 中 的 props 进 而 改变 组 件 的 样式 , 我 们 能 证 
组 件 更 加 的 可 复 用 . 


我 们 把 color 和 backgroundColor 属 性 作为 组 件 的 props 传 入 , 另外 我 们 新 加 了 一 个 
props 来 调整 padding top f» padding bottom. 


const Button = ({ 


big, 
color = colors.white, 
backgroundColor = colors.blue, 
.. props 
}) = { 
const sx = { 
fontFamily: 'inherit', 
fontSize: 'inherit', 
fontWeight: bold, 
textDecoration: 'none', 
display: 'inline-block', 
margin: 0, 
paddingTop: big ? space[2] : space[1], 
paddingBottom: big ? space[2] : space[1], 
paddingLeft: space[2], 
paddingRight: space[2], 


border: 0, 
color, 
backgroundColor, 


WebkitAppearance: 'none', 
MozAppearance: 'none' 


}; 


return ( 
<button {...props} style={sx}/> 


const Button = () => ( 
<div> 
<Button> 
Blue Button 
</Button> 
<Button big backgroundColor={colors.red}> 
Big Red Button 
«/Button» 
«/div» 


): 


// 通过 Button 组 件 的 API 去 改变 Button 组 件 的 样式 ， 

// 我 们 能 得 到 样式 各 异 的 Button . 

const ButtonBig = (props) => <Button {...props} big/>; 

const ButtonGreen = (props) => <Button {...props} backgroundColo 
r={colors.green}/>; 

const ButtonRed = (props) => <Button {...props} backgroundColor= 
{colors.red}/>; 

const ButtonOutline = (props) => <Button {...props} outline/>; 


布局 组 件 


我 们 拓展 了 基础 组 件 的 概念 , 创造 出 了 布局 组 件 . 
例子 


const Grid = (props) => ( 
<Box {...props} 
display='inline-block' 
verticalAlign='top' 
px={2}/> 
); 


const Half = (props) => ( 
«Grid {...props} 
width={1 / 2}/> 
); 


const Third = (props) => ( 
<Grid {...props} 
width={1 / 3}/> 
); 


const Quarter = (props) => ( 
«Grid {...props} 
width={1 / 4}/> 
); 


const Flex = (props) => ( 
<Box {...props} 
display='flex'/> 
); 


const FlexAuto = (props) => ( 
«Box {...props} 
flex='1 1 auto'/> 
) ; 


用 法 


const Layout = () => (人 
<div> 
<div> 
<Half>Half width column</Half> 
<Half>Half width column</Half> 
</div> 
<div> 
<Third>Third width column</Third> 
<Third>Third width column</Third> 
<Third>Third width column</Third> 
</div> 
<div> 
<Quarter>Quarter width column</Quarter> 
<Quarter>Quarter width column</Quarter> 
<Quarter>Quarter width column</Quarter> 
<Quarter>Quarter width column</Quarter> 
</div> 
</div> 


): 


e Github: React Layout components 
e Leveling Up With React: Container Components 
e Container Components and Stateless Functional Components in React 


排版 组 件 


我 们 拓展 了 基础 组 件 的 概念 创造 了 排版 组 件 . 这 个 模式 能 保证 一 致 性 以 及 你 的 样式 
足够 的 纯净 . 


例子 


import React from 'react'; 
import { alternateFont, typeScale, boldFontweight } from './styl 
es'; 


const Text = ({ 

tag - 'span', 

size - 4, 

alt, 

center, 

bold, 

caps, 

.. . props 

}) => { 

const Tag = tag; 

const sx = { 
fontFamily: alt ? alternateFont : null, 
fontSize: typeScale[size], 
fontWeight: bold ? boldFontWeight : null, 
textAlign: center ? 'center' : null, 
textTransform: caps ? 'uppercase' : null 


Hh 


return «Tag {...props} style={sx}/> 


const LeadText = (props) => «Text {...props} tag-'p' size={3}/>; 
const Caps = (props) => <Text {...props} caps/>; 

const MetaText = (props) => <Text {...props} size={5} caps/>; 
const AltParagraph = (props) => <Text {...props} tag='p' alt/>; 


const CapsButton = ({ children, ...props }) => ( 
<Button {...props}> 
<Caps> 
{children} 
</Caps> 
</Button> 


); 


用 法 


const TypographyComponent = () => ( 
<div> 
<LeadText> 
This is a lead with some<Caps>all caps</Caps>. 
It has a larger font size than the default paragraph. 
</LeadText> 
<MetaText> 
This is smaller text, like form helper copy. 
</MetaText> 
</div> 


); 


使 用 高 阶 组 件 来 改变 样式 


有 时 有 一 些 组 件 可 能 只 需要 很 少 的 一 部 分 state 来 维护 一 些 很 简单 的 交互 ,我 们 也 有 
充足 的 理由 把 这 些 组 件 作 为 可 复 用 的 组 件 . 


例子 . Carousel 组 件 的 交互 


例子 : Carousel 


这 个 高 阶 组 件 会 持 有 当前 幻灯 片 的 index 并 且 提 供 前 进 和 回 退 的 功能 . 


// 高 阶 组 件 
import React from 'react' 
// 这 个 高 阶 组 件 其 实 可 以 被 命名 的 更 加 通俗 多 懂 ， 比如 Counter 或 者 Cycle 
const CarouselContainer = (Comp) => { 
class Carousel extends React.Component { 
constructor () 4 
super(); 
this.state = ( 
index: 0 
3 
this.previous = () => { 
const { index } = this.state; 
if (index > 0) ( 
this.setState({index: index - 1}) 
} 
}; 


this.next = () => { 
const { index } = this.state; 
this.setState({index: index + 1}) 


} 
} 
render() { 
return ( 
<Comp 
ehis props } 
1... sens -Stave}, 
previous={this.previous} 
next={this.next}/> 
) 
} 
} 
return Carousel 
}; 


export default CarouselContainer; 


使 用 高 阶 组 件 


// *&UI component 
const Carousel = ({ index, ...props }) => { 
const length = props.length || props.children.length || 0; 


const sx = { 
root: { 
overflow: 'hidden' 


ty 
inner: { 
whiteSpace: 'nowrap', 
height: '100%', 
transition: 'transform .2s ease-out', 
transform: ^translateX($[index % length * -100}%)~ 
ty 
child: { 
display: 'inline-block', 
verticalAlign: 'middle', 
whiteSpace: 'normal', 
outline: '1ipx solid red', 
width: '100%', 
height: '100%' 
} 
}; 
const children = React.Children.map(props.children, (child, i) 
x» 1 
return ( 
«div style={sx.child}> 
{child} 
</div> 
) 
3); 
return ( 


«div style={sx.root}> 
«div style={sx.inner}> 
{children} 
</div> 
</div> 


ig 


// 3xxJa *Carousel 2144 
const HeroCarousel = (props) => { 
return ( 
<div> 
<Carousel index={props.index}> 
<div>Slide one</div> 
<div>Slide two</div> 
<div>Slide three</div> 
</Carousel> 
<Button 
onClick={props.previous} 
children='Previous '/> 
<Button 
onClick={props.next} 
children='Next '/> 
</div> 
) 
3 


// RAIE In A BZ—Acontainer 2 KAR AG He € 2 OB. 
export default CarouselContainer (HeroCarousel ) 


通过 保持 样式 和 交互 状态 的 分 离 , 基于 同一 个 carsousel 组 件 , 我 们 可 以 创造 任意 数量 
不 同 的 更 复杂 的 carousel 组 件 ， 


用 法 


const Carousel = () => ( 
<div> 
<HeroCarousel /> 
</div> 


); 


React 中 的 陷阱 


在 绝 大 多 数 情况 下 , React 都 是 清晰 直观 的 . 但 是 也 不 乏 有 一 些小 陷阱 , 不 注意 的 话 有 
时 候 也 会 给 你 "意外 的 惊喜 ". 下 面 我 们 就 来 介绍 一 下 这 些小 陷阱 


参考 资料 
React Gotchas 


Top 5 React Gotchas 


TRE a AR ag: PE se 


为 了 保障 组 件 的 性 能 , 我 们 有 的 时 候 会 从 组 件 泻 染 的 角度 出 发 
更 干净 的 render 有 函数 ? 这 个 概念 可 能 会 有 点 让 人 疑惑 . 


其 实在 这 里 干净 是 指 我 们 在 shouldComponentUpdate 这 个 生命 周期 函数 里 面 去 做 
浅 比 较 , 从 而 避免 不 必要 的 泻 染 ， 


关于 上 面 的 干净 泻 染 , 现 有 的 一 
PureRenderMixin, comes 


实现 包括 React.PureComponent， 
e 等 等 . 


第 一 个 例子 
坏 实 践 
class Table extends PureComponent { 
render() ( 
return ( 
«div» 
{this.props.items.map(i => 
<Cell data={i} options={this.props.options || []}/> 
)} 


</div> 


): 


这 种 写法 的 问题 在 于 {this.props.options || []} -这 种 写法 会 导致 所 有 的 Cell 
都 被 重新 泻 染 即使 只 有 一 个 cell 发 生 了 改变 .为 什么 会 发 生 这 种 事 呢 ? 


仔细 观察 你 会 发 现 , options 这 个 数组 被 传 到 了 Cell 这 个 组 件 上 , 一 般 情 况 下 , 这 不 会 
导致 什么 问题 . 因为 如 果 有 其 他 的 Cell 组 件 , 组 件 会 在 有 props 发 生 改变 的 时 候 浅 对 比 
props 并 且 跳 过 泻 业 (因为 对 于 其 他 Cell 组 件 , props 并 没有 发 生 改 变 ). 但 是 在 这 个 例 
子 里 面 , 当 options 为 null 时 , 一 个 默认 的 空 数组 就 会 被 当成 Props 传 到 组 件 里 面 去 . F 
实 上 每 次 传 入 的 [] 都 相当 于 创建 了 新 的 Array 实 例 . 在 JavaScript 里 面 , 不 同 的 实例 


是 有 不 同 的 实体 的 , 所 以 浅 比 较 在 这 种 情况 下 总 是 会 返回 false, 然后 组 件 就 会 被 重新 
ae. 因为 两 个 实体 不 是 同一 个 实体 . 这 就 完全 破坏 了 React 对 于 我 们 组 件 泻 染 的 优 
Mw, 


好 实践 


const defaultval = []; // «--- 也 可 以 使 用 defaultProps 
class Table extends PureComponent { 
render() { 
return ( 
<div> 
{this.props.items.map(i => 
<Cell data={i} options={this.props.options || defaultv 
al}/> 
)} 
</div> 


); 


第 二 个 例子 
在 render 哆 数 里 面 调用 函数 也 可 能 导致 和 上 面相 同 的 问题 . 
坏 实 践 
class App extends PureComponent { 
render() { 


return <MyInput 
onChange={e => this.props.update(e.target.value))/»; 


又 一 个 坏 实 践 


class App extends PureComponent { 
update(e) ( 
this.props.update(e.target.value); 


render() ( 
return «MyInput onChange={this.update.bind(this)}/>; 


在 上 面 的 两 个 坏 实 践 中 , 每 次 我 们 都 会 去 创建 一 个 新 的 函数 实体 . 和 第 一 个 例子 类 似 ， 
新 的 部 数 实体 会 让 我 们 的 浅 比 较 返 回 false, 导致 组 件 被 重新 泻 染 . 所 以 我 们 需要 在 更 
早 的 时 候 去 bind 我 们 的 函数 . 


class App extends PureComponent { 
constructor(props) { 


super(props); 
this.update - this.update.bind(this); 


update(e) { 
this.props.update(e.target.value); 


render() ( 
return «MyInput onChange={this.update}/>; 


坏 实践 


Pure render checks 


class Component extends React.Component ( 


state = (clicked: false}; 


onClick() { 
this.setState({clicked: true}) 


} 

render() { 
// 如 果 options 为 空 的 话 ， 每 次 都 会 创建 一 个 新 的 {test :1} 对 象 
const options = this.props.options || {test: 1}; 


return <Something 
options={options} 
// New function created each render 
onClick={this.onClick.bind(this) } 
// New function & closure created each render 
onTouchTap={(event) => this.onClick(event ) 

/> 
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Pure render checks 


class Component extends React.Component ( 
state - (clicked: false); 
options - (test: 1); 


onClick = () => { 
this.setState({clicked: true}) 


3 
render() ( 
// 0ptions 这 个 对 象 只 被 创建 了 一 次 ， 
const options = this.props.options || this.options; 


return <Something 
options={options} 
onClick={this.onClick} // 函数 只 创建 一 次 ， 只 绑 定 一 次 
onTouchTap={this.onClick} // &mZXAXm—x, RREK 
vas 


e https://medium.com/@esamatti/react-js-pure-render-performance-anti- 
pattern-fb88c101332f 

e https://github.com/nfour/js-structures/blob/master/guides/react-anti- 
patterns.mdZpure-render-immutability 

e Optimizing React Rendering 
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React ? 4) Synthetic 事件 


React 在 处 理事 件 (event 时 ), # S: E48 A f SyntheticEventst $- & € T /& + event 
5. 


这 些 React 自 己 维护 的 对 象 是 相互 联系 的 , 意味 着 如 果 对 于 某 一 个 事件 , 我 们 给 出 了 
对 应 的 响应 函数 (handler), 其 他 的 SyntheticEvent 对 象 也 是 可 以 重用 的 .这 也 是 React 
提升 性 能 的 秘诀 之 一 . 但 是 这 也 意味 着 , 如 果 想 要 通过 异步 的 方式 访问 事件 对 象 是 不 
可 能 的 , 因为 出 于 reuse 的 原因 , 事件 对 象 里 面 的 值 都 被 重 置 了 . 


下 面 这 段 代 码 会 在 控制 台 里 面 打 出 null, 因为 事件 在 SyntheticEvent 池 中 被 重用 了 . 


function handleClick(event) { 
setTimeout(function () { 
console.log(event.target.name); 
+ 1000); 
} 


为 了 避免 这 种 情况 , 你 需要 去 保存 你 关心 的 事件 的 属性 . 


function handleClick(event) { 
let name = event.target.name; 
setTimeout(function () { 
console. log(name) ; 
}, 1000); 


e React/Redux: Best practices & gotchas 
e React events in depth w/ Kent C. Dodds, Ben Alpert, & Dan Abramov 


Related Links 


Related Links 


e React in Patterns by krasimir 

e React Patterns by planningcenter 
e reactpatterns.com 

e 10 React Mini-patterns 


/ 
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